//列表页面
import React, { PureComponent } from 'react';
import {Input} from 'antd';
import {
    SearchOutlined
} from '@ant-design/icons';
import "./index.scss";
import axios from 'axios';
class List extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            searchWord: "",
            searchList: [],
            page: 1 //当前页下标
        }
    }
    componentDidMount() {
        console.log(this.props);
        const keyword = this.props.location.state.keyword
        this.setState({ searchWord: keyword });
        //获取数据
        axios.post("/appapi/root-ceo-commodity/commodityApi/commoditySearch", {
            channelId: "C06022632001",
            isWholeSale: 0,
            page: 1,
            searchKey: keyword
        }).then(res => {
            console.log(res);
            console.log(this.props);
            this.setState({ searchList: res.data.data.templateList })
        })
        

        //触底加载 ，调用 滚动事件
        this.onScroll();
    }

    //绑定滚动的函数
    onScroll = () => {
        window.onscroll = () => {
            //获取滚动距离
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // console.log("滚动距离：" + scrollTop);
            //窗口的高度
            let windowHeight = document.documentElement.clientHeight;
            //滚动高度
            let scrollHeight = document.body.scrollHeight;
            // console.log(" 高度：" + windowHeight + "|滚动高度：" + scrollHeight);
            //判断是否触底了
            if (scrollHeight - scrollTop <= windowHeight) {
                console.log("到底了");
                //当前页下标加一
                this.setState({ page: this.state.page + 1 })
                //获取新数据，追加到原来数据的基础上
                this.moreData();
            }
        }
    }

    //获取新数据
    //到底了，需要判断所有数据都加载完了，不要再请求后台数据了，还要有一个提示，到底了
    moreData = () => {
        axios.post("/appapi/root-ceo-commodity/commodityApi/commodityMore", {
            channelId: null,
            isWholeSale: 0,
            page: this.state.page
        }).then(res => {
            console.log(62, res);
            //进行数组连接
            let oldData = this.state.searchList;
            let newData = res.data.data.templateList;
            newData = oldData.concat(newData);
            this.setState({ searchList: newData })

        })
    }

    /*
    1.绑定  滚动事件
    2.判断是否到底
    3.到底了，就获取新数据，
    4.将新数据连接到旧数据的后面
    5.注意：到底了，需要判断所有数据都加载完了，不要再请求后台数据了，还要有一个提示，到底了
    */
    render() {
        const { keyword } = this.props.location.state
        const { searchList } = this.state;
        return <div className="list_con">
            <div><Input size="small" placeholder={keyword} prefix={<SearchOutlined />}  className="list_input"/><button>取消</button></div>
            <ul >
                {
                    searchList.map((item, index) => <li key={index}>
                        <div className="list_img"><img src={item.listImages} alt={item.name} /></div>
                        <div className="list_manzeng"><img src="https://hotkidceo-1251330842.cos.ap-shanghai.myqcloud.com/static/home/gift.png" alt="" /></div>
                        <div className="list_name">{item.name}</div>
                        <div className="list_displayname">{item.displayName}</div>
                        <div className="list_price"><span>￥{Math.round(item.retailPrice)}</span><span>￥{Math.round(item.origPrice)}</span><span><img src="https://hotkidceo-1251330842.cos.ap-shanghai.myqcloud.com/static/new/new_shopCart1.png" alt="" /></span></div>
                    </li>)
                }
            </ul>

        </div>
    }
}
export default List;